<template>
  <!-- 遮罩层 -->
  <view 
    v-if="visible" 
    class="modal-mask" 
    :class="{ 'mask-show': visible }" 
    @tap="handleMaskClick"
  >
    <!-- 弹窗主体（正方形） -->
    <view 
      class="modal-container" 
      :class="{ 'container-show': visible }"
      @tap.stop
    >
      <!-- 二维码图片容器 -->
      <view class="qrcode-box">
        <image 
          :src="qrcodeUrl" 
          mode="aspectFit" 
          class="qrcode-img"
        />
      </view>
    </view>

    <!-- 独立关闭按钮（在弹窗外部右上角） -->
    <view 
      class="close-btn" 
      @tap="close"
    >
      ×
    </view>
  </view>
</template>

<script>
export default {
  name: "qrcode-modal",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    qrcodeUrl: {  // 二维码图片地址
      type: String,
      required: true
    },
    closeOnClickMask: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    close() {
      this.$emit("update:visible", false);
      this.$emit("close");
    },
    handleMaskClick() {
      if (this.closeOnClickMask) this.close();
    }
  },
  mounted(){
	  console.log(this.visible,'visible');
  },
};
</script>

<style scoped>
/* 遮罩层 */
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s;
  z-index: 999;
}

.mask-show {
  background-color: rgba(0, 0, 0, 0.6);
}

/* 弹窗容器（正方形） */
.modal-container {
  width: 520rpx;
  height: 520rpx;
  background: #fff;
  border-radius: 20rpx;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s;
}

.container-show {
  opacity: 1;
  transform: scale(1);
}

/* 二维码容器 */
.qrcode-box {
  width: 100%;
  height: 100%;
  /* padding: 40rpx; */
}

.qrcode-img {
  width: 100%;
  height: 100%;
  border-radius:30px;
}

/* 独立关闭按钮 */
.close-btn {
  position: absolute;
  top: calc(50% - 250rpx - 80rpx); /* 弹窗高度一半 + 间距 */
  right: calc(50% - 250rpx - 40rpx); /* 弹窗宽度一半 + 间距 */
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  color: black;
  font-size: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  z-index: 1000;
}
</style>